<template>
  <div class="swiperVue" >
    <swiper-container>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
  </div>
</template>

<script lang="ts" setup>
// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
import 'swiper/css';
import type { Swiper as TypeSwiper } from 'swiper';

// register Swiper custom elements
register();

const onSwiper = (swiper: TypeSwiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log('slide change');
};
</script>

<style scoped>
.swiperVue {
  
}
</style>